<template>
    <div class="product-wrap">
        <headerNav title="商品详情"/>
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in detail.itemPicTopResultDtoList" :key="index">
                <!-- <img :src="item.narrowPicUrl" class="product-img"> -->
            <van-image
                class="product-img"
                fit="cover"
                :src="item.narrowPicUrl"
              />
            </van-swipe-item>
        </van-swipe>
        <div class="flex">
            <div class="title">
                <div class="flex-l">
                    <span class="price">¥<b>{{detail.price}}</b></span>
                    <!-- <span class="label">热卖</span>
                    <span class="label">2件9折</span>                    -->
                </div>
                <!-- <img src="../../assets/images/share.png"> -->
            </div>
            <div class="introduce">{{detail.itemTitle}}</div>            
        </div>
        <div class="grey"></div>
        <div class="product-imgs">
            <span>-- 商品详情 --</span>
                <van-image
                    v-for="(item, index) in detail.itemPicDetailResultDtoList"
                    :key="index"
                    class="product-img"
                    fit="cover"
                    :src="item.narrowPicUrl"
                />
            <!-- <img :src="item.narrowPicUrl" v-for="(item, index) in detail.itemPicDetailResultDtoList" :key="index"> -->
        </div>
        <div class="cart">
            <!-- <div class="cart-img">
                <img src="../../assets/images/car.png">
                <span>购物车</span>
            </div>
            <div class="join" @click="joinCart">加入购物车</div> -->
            <div class="buy" @click="Buy">立即购买</div>
        </div>
        <div class="modal-pop" v-if="showBase"></div>
        <div class="sku-wraps" v-if="showBase">
            <div v-for="(item, index) in skuData" :key="index">
                <div class="sku-detail-wrap" v-show="index === activeIndex">
                    <van-image
                        class="product-img"
                        fit="cover"
                        :src="item.narrowPicUrl"
                    />
                    <!-- <img :src="item.narrowPicUrl"> -->
                    <div class="label">
                        <span>{{item.price}}</span>
                        <span>{{item.stockTitle}}</span>
                    </div>
                    <van-icon name="close" @click="showBase = false"/>
                </div>
            </div>
            <div class="sku">
                <div class="sku-name">规格</div>
                <div class="sku-types">
                    <span v-for="(item, index) in skuData" :key="index" :class="[{'active': index === activeIndex ? true : false}]" @click="toggle(index)">{{item.stockTitle}}</span>
                </div>
            </div>
            <div class="num">
                <span>数量</span>
                <van-stepper v-model="number" />
            </div>
            <div class="sure" @click="handleSure">确定</div>
        </div>
    </div>
</template>

<script>
import Vue from "vue"
import { Swipe, SwipeItem, ActionSheet, Stepper, Icon, Image as VanImage } from 'vant';

Vue.use(Swipe).use(SwipeItem).use(ActionSheet).use(Stepper).use(Icon).use(VanImage);
import cart from "../cart/index"
import {findGoodsByItemNo} from "../../api/page"
export default {
    components: {
        cart
    },
    data() {
        return {
            detail: {},
            showBase: false,
            number: 1,
            activeIndex: 0,
            skuData: []
        };
    },
    created() {

    },
    mounted() {
        this.token = localStorage.getItem("token")
        // this.detail = JSON.parse(sessionStorage.getItem("productDetail"))
        // this.skuData = this.detail.itemSkuResultDtos
        console.log(this.detail)
        this.getData()
    },
    methods: {
        handleSure() {
            const obj = Object.assign({buyNum: this.number}, this.skuData[this.activeIndex])
            console.log(obj)
            this.$store.dispatch("setOrder", obj)
            if (this.skuData[this.activeIndex] && this.skuData[this.activeIndex].profitType === "SCORE") {
                this.$router.push({ name: "order", query: {type: "SCORE"}});
                return
            } 
            this.$router.push({ name: "order"});
        },
        toggle(index) {
            this.activeIndex = index
        },
        joinCart() {
            this.$toast("此功能待完善，请先立即购买")
        },
        Buy() {
            if(this.token){
                this.showBase = true
            } else {
                this.$toast("请先登录~");
                this.$router.push({ name: "login"});
            }
        },
        getData() {
            findGoodsByItemNo(this.$route.query.itemNo).then(res => {
                this.detail = res.data
                this.skuData = res.data.itemSkuResultDtos
            })
        },
        onBuyClicked(data) {

            if(this.token){
                let patData = JSON.stringify(data);
                patData = JSON.parse(patData)
                let obj = { 
                "num": patData.selectedNum, 
                "itemNo": this.goods.itemNo,
                "itemName": this.goods.itemTitle,
                "itemNarrowPic": this.goods.narrowPicUrl,
                "price": this.goods.price,
                "allPrice":patData.selectedNum * this.goods.price
                }
                let arr = []
                arr.push(obj);
                this.$store.dispatch("setShopping", arr);
                this.$router.push({ name: "order",query:{Source:0}});
            }else{
                this.$toast("请先登录~");
                this.$router.push({ name: "login"});
            } 
        },
        onAddCartClicked(data) {

            let selData = JSON.stringify(data)
            selData = JSON.parse(selData)
            let obj = {
                "itemNo": this.goods.itemNo, 
                "catNo": this.goods.catNo, 
                "itemTitle": this.goods.itemTitle,
                "narrowPicUrl": this.goods.narrowPicUrl, 
                "num": selData.selectedNum, 
                "price": this.goods.price
            }
            cart.addproduct(obj);
            this.$toast("添加成功~");
            this.showBase = false
        }
    }
};
</script>

<style scoped lang="less">
/deep/ .van-actionsheet {
    max-height: 100%;
    overflow: initial;
}
/deep/ .van-nav-bar {
    top: 0
}
@keyframes pop {
    0% {
		bottom: -8rem;
    }
    25% {
		bottom: -6rem;
	}
	50% {
		bottom: -4rem;
    }
    75% {
		bottom: -2rem;
    }
    100% {
        bottom: 0;
    }
}
.modal-pop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 0, 0, .5);
}
.sku-wraps {
    position: fixed;
    bottom: 0;
    padding: 0.266667rem;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    animation: pop .1s;
    z-index: 1;
}
.sku-detail-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /deep/ .van-icon {
        position: absolute;
        right: 0.266667rem;
        top: 0.266667rem;
        font-size: 0.64rem;
    }
    img {
        width: 2.133333rem;
        height: 2.133333rem;
    }
    .label {
        display: flex;
        height: 2.133333rem;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
        margin-left: 0.266667rem;
        flex-direction: column;
        span:nth-child(1) {
            color: #d2691e;
            font-size: 0.373333rem;
            display: block;
            width: 100%;
        }
        span:nth-child(2) {
            color: #999;
            font-size: 0.32rem;
            display: block;
            width: 100%;
        }
    }
}
.sku {
    margin-top: 0.8rem;
    .sku-name {
        font-size: 0.32rem;
        color: #ccc;
        margin-bottom: 0.266667rem;
    }
    .sku-types {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span {
            display: inline-block;
            padding: 0.133333rem 0.186667rem;
            border-radius: 0.08rem;
            font-size: 0.373333rem;
            border: 0.026667rem solid #d2691e;
            color: #d2691e;
            margin-right: 0.4rem;
            &.active {
                background: #d2691e;
                color: #fff;
            }
        }
    }
}
.num {
    margin: 0.8rem auto 0.533333rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
        font-size: 0.32rem;
        color: #ccc;
    }
}
.sure {
    margin-bottom: 0.533333rem;
    width: 9.2rem;
    height: 1.333333rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.666667rem;
    font-size: 0.426667rem;
    color: #fff;
    background: #ff531a;
}
    .product-wrap {
        padding-bottom: 1.333333rem;
        padding-top: 1.226667rem;
        .product-img {
            width: 100%;
        }
        .flex {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 0.4rem;
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 9.2rem;
                .flex-l {
                    display: flex;
                    justify-items: center;
                    align-items: center;
                    .price {
                        color: #FF531A;
                        font-size: 0.4rem;
                        display: flex;
                        align-items: center;
                        b {
                            font-size: 0.72rem;
                        }
                    }
                    .label {
                        display: flex;
                        color: #ff531a;
                        font-size: 0.32rem;
                        padding: 0 0.306667rem;
                        height: 0.533333rem;
                        align-items: center;
                        background: #ffeee5;
                        margin: 0 0.24rem;
                        border-radius: 0.266667rem;
                    }
                }
                img {
                    width: 0.533333rem;
                    height: 0.533333rem;
                }

            }
            .introduce {
                color: #333333;
                font-size: 0.373333rem;
                text-align: left;
                width: 100%;
            }
        }
        .grey {
            width: 100%;
            height: 0.2rem;
            background: #F2F2F2;
        }
        .product-imgs {
            img {
                width: 100%;
            }
            span {
                font-size: 0.4rem;
                color: #FF531A;
                display: block;
                width: 100%;
                text-align: center;
                padding: 0.346667rem 0;
            }
        }
        .cart {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            align-items: center;
            background: #fff;
            .cart-img {
                width: 1.76rem;
                height: 1.333333rem;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img {
                    width: 0.56rem;
                    height: 0.533333rem;
                }
                span {
                    color: #999999;
                    font-size: 0.32rem;
                }
            }
            .join {
                width: 4.133333rem;
                height: 1.333333rem;
                background: #353347;
                color: #fff;
                font-size: 0.453333rem;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .buy {
                width: 4.133333rem;
                height: 1.333333rem;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #FF531A;
                font-size: 0.453333rem;
                font-weight: bold;
                width: 100%;
            }
        }
    }
</style>
